<template>
    <div class="breadcrumb">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>奖项列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card>
        <div class="search">
            <el-space size="large">
                <el-button @click="this.$router.push({ path: '/awarditem/0' })">新增</el-button>
            </el-space>
        </div>
        <el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData" border style="width: 100%" size="large">
            <el-table-column prop="id" label="ID" width="150" />
            <el-table-column prop="name" label="奖项名称" width="350" />
            <el-table-column prop="amount" label="奖项数量" width="250" />
            <el-table-column prop="round" label="轮次" width="250" />
            <el-table-column prop="award.name" label="奖品名称" width="350" />
            <el-table-column prop="created_at" label="创建时间" />
            <el-table-column label="操作" width="150">
                <template #default="scope">
                    <router-link :to="`/awarditem/${scope.row.id}`">编辑</router-link>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
export default {
    name: 'AwardItemView',
    components: {},

    data() {
        return {
            tableData: [],
            loading: false
        }
    },

    methods: {
        getAwardItem() {
            this.loading = true
            this.$http.get("/admin/awarditem/list").then((res) => {
                this.tableData = res.data
                this.loading = false
            }).catch(() => {

            })
        },
    },

    mounted() {
        this.getAwardItem()
    }
}
</script>

<style scoped>
.breadcrumb {
    height: 35px;
}

.search {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 60px;
    padding-right: 30px;
    margin-bottom: 10px;
}

a {
    text-decoration: none;
}
</style>